<template>
	<el-row>
		<el-col :span="12">
			<div class="sl-left">
				
			</div>
		</el-col>
		<el-col :span="12">
			<div class="sl-right">
				<div class="main-box login-form">
					<h1 style="text-align: center;">小鱼Mall二手交易平台</h1>
					<h4 style="text-align: center;">- 商户端 -</h4>
					<form id="loginForm">
						<input type="text" v-model="loginForm.phone" placeholder="手机号" required>
						<input type="password" v-model="loginForm.password" placeholder="密码" required>
						<el-button type="submit" @click="handleLogin">登录</el-button>
						<p>·</p>
						<el-button type="submit" @click="handleRegister">注册</el-button>
					</form>
				</div>
			</div>
		</el-col>
	</el-row>
</template>

<style>
	.sl-left {
		 background: linear-gradient(to right, #74EBD5, #ACB6E5);
		height: 100vh;
	}
	
	
	.sl-right {
		display: flex;
		/* 启用flex布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		height: 100%;
	}
	
	.sl-right .main-box {
		margin-top: 150px;
		height: 500px;
		width: 500px;
	}
	
	.sl-right .login-form input {
	 	width: 100%;
	 	padding: 10px;
	 	margin: 10px 0;
	 	border: 1px solid #ccc;
	 	border-radius: 4px;
	 }
	
	 .sl-right .login-form button {
	 	width: 100%;
	 	padding: 10px;
	 	border: none;
	 	background-color: #495057;
	 	color: white;
	 	border-radius: 4px;
	 	cursor: pointer;
	 }
	
	 .sl-right .login-form button:hover {
	 	background-color: #343a40;
	 }
	
	 .sl-right .login-form .alternative {
	 	text-align: center;
	 	margin-top: 20px;
	 }
</style>



<script>
	import axios from 'axios';
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					password: ''
				},
				loginFormRules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				},
				overlaylong: 'overlaylong',
				overlaytitle: 'overlaytitle',
				disfiex: 0
			}
		},
		methods: {
			handleLogin() {
				try {
					axios.post('http://81.70.99.233:8090/account/MerchantLogin', {
						tele: this.loginForm.phone,
						password: this.loginForm.password
					}).then(response => {
						const responseData = response.data;
						console.log(responseData);
						if (responseData.code === 1) {
							console.log('登录成功');
							console.log(responseData.data.token);
							localStorage.setItem('token', responseData.data.token);
							this.$message('欢迎您！' + responseData.data.name);
							this.$router.push('/merchant_index');
							console.log('登录成功返回的数据：', responseData.data);
						} else {
							console.error('登录失败：', responseData);
							this.$message.error(responseData.msg);
						}
					});
				} catch (error) {
					console.error('登录失败：', error);
				}
			},
			handleRegister() {
				console.log('跳转至注册页面');
				this.$router.push('/merchant_register');
			}

		}
	}
</script>